import React from 'react';
import { Pie } from '@ant-design/plots';

const DemoPie = ({ data = [] }) => {
  // 初始化每个部门的数量为0
  const depts = {
    '101': 0,
    '202': 0,
    '303': 0,
    '404': 0,
  };

  // 统计每个部门的数量
  if (data && data.forEach) { // 确保rawData存在且有forEach方法
    data.forEach(item => {
      const { userDeptId } = item;
      if (depts[userDeptId]) {
        depts[userDeptId] += 1; // 增加相应部门的计数
      }
      else {
        depts[userDeptId] = 1; // 如果部门ID不存在，则初始化为1
      }
    });
  }
  console.log("depts",depts);

  // 将对象转换为数组，以便饼图组件可以正确处理
  const pieData = Object.entries(depts).map(([userDeptId, num]) => ({
    userDeptId,
    num,
  }));

  const config = {
    data: pieData, // 使用处理后的数据
    angleField: 'num',
    colorField: 'userDeptId',
    label: {
      type: 'inner',
      content: '{name}：{percentage}',
      style: {
        fontWeight: 'bold',
        fontSize: 12,
      },
    },
    legend: {
      position: 'right',
    },
  };

  return <Pie {...config} />;
};

export default DemoPie;
